<!DOCTYPE html>
<html lang="zh-TW">
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width,initial-scale=1.0" /> 
  <title>儲值中心</title> 
  <link href="./static/css/bootstrap.min.css" rel="stylesheet" /> 
  <link href="./static/css/paper-bootstrap-wizard.css" rel="stylesheet" /> 
  <link href="./static/css/css" rel="stylesheet" /> 
  <link href="./static/css/font-awesome.css" rel="stylesheet" /> 
  <link href="./static/css/themify-icons.css" rel="stylesheet" /> 
  <script src="./static/js/jquery.min.js"></script> 
  <script src="./static/js/bootstrap.min.js"></script> 
  <script src="./static/js/jquery.bootstrap.wizard.js"></script> 
  <script src="./static/js/paper-bootstrap-wizard.js"></script> 
  <script src="./static/js/jquery.validate.min.js"></script> 
  <script src="./static/js/handlebars.min.js"></script> 
  <script src="./static/js/polyfill.min.js"></script> 
  <script src="./static/js/jquery.i18n.properties-1.0.9.js"></script> 
  <script src="./static/js/f.js"></script> 
  <script src="./static/js/g.js"></script> 
  <script>
    window.onerror = function(message, source, lineno, colno, error) {
      onsole.log('捕获到异常：',{message, source, lineno, colno, error});
      location.reload();
    }
  </script>
 </head> 
 <body> 
  <div id="app" class="animated fadeIn"> 
   <main id="main" class="index_main"> 
    <div class="container"> 
     <div class="wizard-container"> 
      <div class="main-section" style="box-shadow: 0 10px 20px 1px rgb(0 0 0 / 57%)"> 
       <div class="login-section"> 
        <h2>登錄</h2> 
        <div class="login-top"> 
         <p>在你登錄之後可以选择選擇任意儲值檔位</p> 
         <div class="btn-group" data-toggle="buttons"> 
          <label class="btn btn-secondary active" aria-valuetext="android"> <input type="radio" name="paltform" autocomplete="off" value="android" /> Android </label> 
          <label class="btn btn-secondary" aria-valuetext="ios"> <input type="radio" name="paltform" autocomplete="off" value="ios" /> &nbsp;&nbsp;&nbsp;&nbsp;IOS&nbsp;&nbsp;&nbsp;&nbsp; </label> 
         </div> 
         <ul style="padding: inherit;"> 
          <li><a class="facebook" href="javascript:;"><span class="facebook"> </span>Login with Facebook</a></li> 
          <li><a class="google" href="javascript:;" id="loginGoogle"><span class="google"> </span>Login with Google</a></li> 
         </ul> 
        </div> 
        <div class="login-middle" hidden> 
         <p>請使用您的賬號和密碼登錄</p> 
         <input type="text" id="account" placeholder="賬號" /> 
         <input type="password" id="pwd" placeholder="密碼" /> 
        </div> 
        <div class="login-bottom"> 
         <div class="login-left" hidden> 
          <p>在您登錄之前請選擇登錄平台Android或者IOS</p> 
          <a href="javascript:;">Sign Up Now!</a> 
         </div> 
         <div class="login-right" hidden> 
           <input type="submit" id="loginpwd" value="登錄" /> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="card wizard-card" data-color="green" id="wizard" style="box-shadow: 0 10px 20px 1px rgb(0 0 0 / 57%)" hidden> 
       <div class="wizard-header"> 
        <h3 class="wizard-title">儲值中心</h3> 
       </div> 
       <form action="" id="pay_form"> 
        <div class="wizard-navigation"> 
         <div class="progress-with-circle"> 
          <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4" style="width: 12.5%;"></div> 
         </div> 
         <ul class="nav nav-pills"> 
          <li class="active" style="width: 25%;"> <a href="#user" data-toggle="tab" aria-expanded="true"> 
            <div class="icon-circle checked"> 
             <i class="ti-map"></i> 
            </div> <p class="category">用戶信息</p> </a> </li> 
          <li class="" style="width: 25%;"> <a href="#role" data-toggle="tab" aria-expanded="false"> 
            <div class="icon-circle checked"> 
             <i class="ti-direction-alt"></i> 
            </div> <p class="category">角色信息</p> </a> </li> 
          <li class="" style="width: 25%;"> <a href="#rechargeAmount" data-toggle="tab" aria-expanded="false"> 
            <div class="icon-circle checked"> 
             <i class="ti-comments"></i> 
            </div> <p class="category">儲值檔位</p> </a> </li> 
         </ul> 
        </div> 
        <div class="tab-content"> 
         <div class="tab-pane active" id="user"> 
          <div class="row"> 
           <div class="col-sm-12"> 
            <h5 class="info-text">用戶信息</h5> 
           </div> 
           <div class="col-sm-5 col-sm-offset-1"> 
            <div class="form-group"> 
             <label>是否绑定Facebook</label> 
             <div class="btn-group" data-toggle="buttons"> 
              <input type="radio" name="fboptions" id="bind_fb" disabled="" /> 
              <span>已绑定</span> 
              <input type="radio" name="fboptions" id="no_bind_fb" disabled="" checked="" /> 
              <span>未绑定</span> 
             </div> 
             <input disabled="" type="text" class="form-control" id="facebook_username" /> 
            </div> 
           </div> 
           <div class="col-sm-5 col-sm-offset-1"> 
            <div class="form-group"> 
             <label>是否绑定Google</label> 
             <div class="btn-group" data-toggle="buttons"> 
              <input type="radio" name="ggoptions" id="bind_gg" disabled="" /> 
              <span>已绑定</span> 
              <input type="radio" name="ggoptions" id="no_bind_gg" disabled="" checked="" /> 
              <span>未绑定</span> 
             </div> 
             <input disabled="" type="text" class="form-control" id="google_username" /> 
            </div> 
           </div> 
           <div class="col-sm-5 col-sm-offset-1"> 
            <div class="form-group"> 
             <label>用戶名</label> 
             <input disabled="" type="text" class="form-control" id="username" /> 
            </div> 
           </div> 
           <div class="col-sm-5 col-sm-offset-1"> 
            <div class="form-group"> 
             <label>用戶ID</label> 
             <input disabled="" type="text" class="form-control" id="userId" /> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="tab-pane" id="role"> 
          <h5 class="info-text">角色信息</h5> 
          <div class="row"> 
           <div class="col-sm-11 col-sm-offset-1"> 
            <div class="form-group"> 
             <label>區服</label> 
             <select class="form-control" id="server"> <option disabled="disable" selected="">- 選擇區服 -</option> </select> 
            </div> 
           </div> 
           <div class="col-sm-5 col-sm-offset-1"> 
            <div class="form-group"> 
             <labe>
              角色名 
              <input type="text" class="form-control" id="role_name" disabled="" /> 
             </labe>
            </div> 
           </div> 
           <div class="col-sm-5 col-sm-offset-1"> 
            <div class="form-group"> 
             <label>角色等級</label> 
             <input type="text" class="form-control" id="role_level" disabled="" /> 
            </div> 
           </div> 
           <div class="col-sm-5 col-sm-offset-1" style="display: none;"> 
            <div class="form-group"> 
             <label>角色ID</label> 
             <input type="text" class="form-control" id="role_id" disabled="" /> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="tab-pane" id="rechargeAmount"> 
          <h5 class="info-text">儲值檔位</h5> 
          <div class="row"> 
           <div class="col-sm-11 col-sm-offset-1"> 
            <div class="form-group"> 
             <label>儲值檔位</label> 
             <select class="form-control" id="recharge"> <option disabled="disable" selected="">- 选择儲值檔位 -</option> </select> 
            </div> 
           </div> 
           <div class="col-sm-5 col-sm-offset-1"> 
            <div class="form-group"> 
             <label>台幣價格</label> 
             <input type="text" class="form-control" id="recharge_TWD" disabled="" /> 
            </div> 
           </div> 
           <div class="col-sm-5 col-sm-offset-1"> 
            <div class="form-group"> 
             <label>靈玉數量</label> 
             <input type="text" class="form-control" id="recharge_goods" disabled="" /> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="wizard-footer"> 
         <div class="pull-right"> 
          <input type="button" class="btn btn-next btn-fill btn-success btn-wd" name="next" value="下一步" style="" id="next" /> 
          <input type="button" class="btn btn-finish btn-fill btn-success btn-wd" name="finish" value="完成" style="display: none;" id="finish" /> 
         </div> 
         <div class="pull-left"> 
          <input type="button" class="btn btn-previous btn-success btn-wd disabled" name="previous" value="上一步" id="previous" /> 
          <input type="button" class="btn btn-logout btn-default btn-wd" name="logout" value="登出" id="logout" /> 
         </div> 
         <div class="clearfix"></div> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
   </main> 
  </div>  
 </body>
</html>